<template>
  <div>
      <!-- <breadcrumb></breadcrumb> -->

      <h2 style="color: gray;">店铺详情</h2>
      <el-divider></el-divider>

      <!-- 详情 -->
       <template v-if="details">
            <el-descriptions  direction="vertical" :column="4" border>
                <!-- 店铺用户 -->
                <el-descriptions-item label="用户身份" :span="1">{{details.user_name}}</el-descriptions-item>
                <el-descriptions-item label="用户名">{{details.uname}}</el-descriptions-item>
                <el-descriptions-item label="用户密码">{{details.upwd}}</el-descriptions-item>
                <el-descriptions-item label="用户手机号">{{details.phone}}</el-descriptions-item>
                <!-- 店铺基本信息 -->
                <el-descriptions-item label="店铺名称">{{details.Chinese}}</el-descriptions-item>
                <!-- <el-descriptions-item label="店铺英文名">{{details.Englist_name}}</el-descriptions-item> -->
                <el-descriptions-item label="店铺图片">
                    <img :src="url" alt="" width="60px">
                </el-descriptions-item>
                <el-descriptions-item label="店铺电话">{{details.TEL}}</el-descriptions-item>
                <el-descriptions-item label="店铺时间">{{details.time}}</el-descriptions-item>
                <el-descriptions-item label="居住地" :span="2">{{details.city}}</el-descriptions-item>
                <el-descriptions-item label="店铺地址">{{details.address}}</el-descriptions-item>
            </el-descriptions>
        </template>
      <template v-else>
          <el-empty>
              <el-button type="primary"  @click="$router.push(`/home/shop-list`)" plain>返回</el-button>
          </el-empty>
      </template>
      <br>
      <!-- 操作 -->
      <el-button-group v-if="$store.state.utype === '1'">
          <el-button type="primary"  icon="el-icon-arrow-left" @click="upper" :disabled="uppernone">上一个</el-button>
          <el-button type="primary" @click="lower" :disabled="lowernone" >下一个<i class="el-icon-arrow-right el-icon--right"  ></i></el-button>
      </el-button-group>
      
  </div>
</template>

<script>
import httpApi from '@/http';
import breadcrumb from '../components/breadcrumb.vue';
  export default {
    components: { breadcrumb},
      data(){
          return{
              url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
              details:[],
              uppernone : false,
              lowernone : false,
              // 获取参数id，加载当前选中的用户的详细信息（发请求）
              id:this.$route.params.id,
              imgnone:true

          }
      },
      methods:{
          detailslist(){
              httpApi.storeApi.queryStoreDetailsById({ store_id:this.id, type:this.$store.state.utype}).then(res =>{
                //   console.log("详情",res);
                  this.details = res.data.data
                  if(this.details.img == /^(http[^"]*)"/){
                     this.url = this.details.img
                    }else {
                     this.url = 'http://localhost:3000/images/'+ this.details.img
                     }
              })

          },
          upper(){
              if(this.id === 1){
                  this.uppernone = true
              }else {
                 this.id--
                 this.detailslist() 
                 
              }
              
          },
          lower(){
              if(this.details.length == 0){
                  this.lowernone = true
              }else{
                 this.id++ 
                 this.uppernone = false
                 this.lowernone = false
                 this.detailslist()
              }   
          }
      },
      mounted(){
            this.detailslist() 
      }
  }
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions-item__content{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 30px;
}
</style>